//定义计算器组件
const Counter= Vue.defineComponent({
	props: { 
		value:Number,
		min:Number,
		max:Number
	},
	data(){
		return{
			count:this.value||0
			}
	},
	watch:{
		count(val){
			this.$emit('update',val)
		}
	},
	methods: {
	   add(){//加法
		   if (typeof this.max == 'number') {
			   if(this.count < this.max)this.count++
		   } else{
				this.count++
		   }
	   },
	   sub(){//减法
		   if (typeof this.min == 'number') {
			   if(this.count > this.min)this.count--
		   } else{
			   this.count--
		   }
	   }
	},
	template:`
		<div class="counter-container" id='app'>
		    <button @click="sub" id="decrement-btn">-</button>
		    <span id="counter-value">{{count}}</span>
		    <button @click="add" id="increment-btn">+</button>
		</div>
	`
})